<template>
  <div class="chips-details-style" v-cloak>
      <div class="details-message">
          <img :src="chipsDetails.activityImage" alt="">
          <p>{{chipsDetails.activityName}}</p>
    </div>
    <div class="money-message">
        <div class="raise clear-fix">
            <div>
                <span>￥</span>
                <span>{{parseInt(chipsDetails.money)}}</span>
                <span v-if="(''+chipsDetails.money).split('.')[1] != undefined">.{{(''+chipsDetails.money).split('.')[1] || ''}}</span>
            </div>
            <div>
                <span>报名中：</span>
                <span>{{chipsDetails.nowEnlistNumber}}人</span>
                <span>/限{{chipsDetails.activityRestrictNumber}}人</span>
                <span><img src="../assets/eye.png" alt=""><span>{{chipsDetails.view}}</span></span>
            </div>
        </div>
        <div class="active-message">
            <ul>
                <li><img class="first-image" src="../assets/时间@3x.png" alt=""><p>{{chipsDetails.activityBeginTime | fmtDate}} 至 {{chipsDetails.activityEndTime | fmtDate}}</p></li>
                <li><img src="../assets/主办单位@3x.png" alt=""><p>一生教育科技有限公司</p></li>
                <li><img src="../assets/地址@3x.png" alt=""><p>{{chipsDetails.activityAddress}}</p></li>
            </ul>
        </div>
    </div>
    <div class="image-text">
        <div class="image-bgc">
            <h4 class="clear-fix">
                <span></span>
                <span>活动详情</span>
            </h4>
            <div class="chilps-text" v-html="chipsDetails.activityContent"></div>
            <div class="examine-all" @click="examineAll" v-if="allText"> 
                <span>查看全文</span>
                <img src="../assets/下箭头@3x.png" alt="">
            </div>
        </div>
    </div>
    <div class="apply-number">
        <h5>已报名({{userListLength}})</h5>
        <ul>
            <li v-for="(item,index) in chipsDetails.userList" :key="index"><router-link :to="'/support_details/'+item.userId+','+chipsDetails.activityId"><img :src="item.userImage" alt=""><p>{{item.userName}}</p></router-link></li>
        </ul>
    </div>
    <comment :activeMark="activeChipsId" :init="callComment" v-on:changePop="getCommentstatus"></comment>
    <div class="chips-fn">
        <div class="fn">
            <collect :collectId="activeChipsId" :collectType="chipsDetails.collectionType"></collect>
            <div @click="conmentContent">
                <img src="../assets/评论@3x.png" alt="">
                <div>评论</div>
            </div>
        </div>
        <div class="sustain-btn">
            <a href="javascript:;">
                 <button class="status-color"  @click="isApply(chipsDetails.status,chipsDetails.activityStatus)">{{statusText}}</button>
            </a>
        </div>
    </div>
    <!-- 参与弹框 -->
    <div class="pay-chips" v-if="chipsPay">
        <div class="bgi" @click="chipsPay = false"></div>
        <div class="content">
            <button @click="setMessage">众筹参与</button>
            <button @click="directPay">直接支付</button>
            <p>注：“众筹参与”指通过亲朋好友支持获取活动经费，众筹金额达到活动金额即报名成功，不成功平台将金额原路返还给支持者。</p>
        </div>
    </div>
  </div>
</template>
<script>
import comment from './sub_comonents/chips_comment'
import collect from './sub_comonents/collect'
export default {
    data() {
        return {
            name: '我的众筹',
            initiateBtn: false, //
            chipsPay: false, //支付弹框
            callComment: false,
            allText: false, //全文
            chipsDetails: {},
            userListLength: 0,
            activeChipsId: this.$route.params.activeId,
            statusText:'我要报名',//根据状态显示不同的名字

            
        }
    },
    created() {
        document.title = '我的众筹'
        this.utils.$get(
            this.utils.GET_CHIPS_DETAILS,
            data => {
                this.chipsDetails = data.data
                this.userListLength = data.data.userList.length
                document.title = data.data.activityName
                //    查看全文
                this.$nextTick(() => {
                    let RichText = document.querySelector('.chilps-text')
                        .offsetHeight
                    if (RichText >= 340) {
                        this.allText = true
                    }
                })
                // 按钮状态
                if(this.chipsDetails.status > 0){
                    this.statusText = '我已报名'
                    document.querySelector('.status-color').style.backgroundColor = '#00d8c9'
                    return
                }
                if(this.chipsDetails.activityStatus == 1){
                    this.statusText = '报名已结束'
                    document.querySelector('.status-color').style.backgroundColor = '#cccccc'
                }
                if(this.chipsDetails.activityStatus == 2){
                    this.statusText = '活动已结束'
                    document.querySelector('.status-color').style.backgroundColor = '#f93a3a'
                }
                if(this.chipsDetails.activityStatus == 3){
                    this.statusText = '报名已满'
                    document.querySelector('.status-color').style.backgroundColor = '#f93a3a'
                }
                if(this.chipsDetails.activityStatus == 4){
                    this.statusText = '暂停报名'
                    document.querySelector('.status-color').style.backgroundColor = '#cccccc'
                }
                if(this.chipsDetails.activityStatus == 5){
                    this.statusText = '平台暂不支持报名'
                    document.querySelector('.status-color').style.backgroundColor = '#cccccc'
                }
            },
            { id: this.$route.params.activeId }
        )
    },
    components: {
        comment,
        collect
    },
    methods: {
        wxLogin() {
            // 获取uuid
            let isSgin = this.utils.cookie('get', 'sgin_messages') //uuid等一些信息
            // 在有uuid等一些信息的情况下进行获取openid登录
            if (isSgin && this.utils.browser.weixin) {
                // 获取微信用户openid
                let uuid = isSgin.uuid //取绑定信息的uuid
                this.utils.$get(
                    this.utils.GETOPENID,
                    parame => {
                        // 存openid
                        let wx = parame.data
                        if (wx.openid != null) {
                            // 格式化openid信息
                            let openid = JSON.stringify(parame.data)
                            // 将openid存到cookie
                            this.utils.cookie('set', 'wx_message', openid, 'd1')
                            // 将openid存到仓库
                            this.$store.commit('transmitWx', openid.unionid)
                        }
                        // 查询是否绑定手机号
                        this.utils.$get(
                            this.utils.ISBINDPHONE,
                            res => {
                                // 此微信用户是否绑定手机号
                                if (!res.data) {
                                    // 触发进行绑定手机号
                                    this.$store.commit('transmiBindTel', true)
                                    // 绑定手机号逻辑
                                } else {
                                    // 已绑定手机号直接进行登录
                                    this.utils.$post(
                                        this.utils.GET_WX_LOGIN,
                                        res => {
                                            // 获取用户数据
                                            this.utils.$get(
                                                this.utils.GET_USER_mESSAGE,
                                                data => {
                                                    // 将用户数据发送到仓库
                                                    this.$store.commit(
                                                        'transmitUser',
                                                        data.data
                                                    )
                                                    // 跳转到支持页面
                                                    this.chipsPay = true
                                                }
                                            )
                                        },
                                        { openid: wx.unionid }
                                    )
                                }
                            },
                            { unionid: wx.unionid }
                        )
                    },
                    { identity: uuid }
                )
            }else{
                mui.toast('请打开微信浏览器授权报名')
            }
        },



        // 是否报名
        isApply(status,activeStatus){
            if(status > 0){
                return mui.toast('您已报名该活动')
            }
            if(activeStatus == 1){
                return mui.toast('报名已结束')
            }
            if(activeStatus == 2){
                return mui.toast('活动已结束')
            }
            if(activeStatus == 3){
                return mui.toast('报名已满')
            }
            if(activeStatus == 4){
                return mui.toast('暂停报名')
            }
            if(activeStatus == 5){
                return mui.toast('平台暂不支持报名')
            }
            this.wxLogin()
        },
        // 查看全文
        examineAll() {
            document.querySelector('.image-text').style.height = 'auto'
            this.allText = false
        },
        // 发起评论
        conmentContent() {
            this.callComment = true
        },
        // 众筹参与
        setMessage() {
            if (!this.utils.cookie('get', 'user')) {
                mui.toast('请登录……')
                this.$router.push({path:'/login'})
                return
            }
            if(!this.utils.cookie('get', 'user').phone){
                this.$router.push({path:'/user/user_bind_phone'})
                return mui.toast('请绑定手机号')
            }   
            this.$router.push({ path: '/set_message/' + this.activeChipsId })
        },
        // 直接支付
        directPay() {
            if (!this.utils.cookie('get', 'user')) {
                 this.$router.push({path:'/login'})
                 return
            }
            if(!this.utils.cookie('get', 'user').phone){
                this.$router.push({path:'/user/user_bind_phone'})
                mui.toast('请绑定手机号')
                return
            }  
            let wxMessage = this.utils.cookie('get', 'wx_message') || {}
            let openId = this.utils.cookie('get', 'wx_message')
            if(!openId){
                return mui.toast('请打开微信进行授权支付')
            }
            this.$router.push({ path: '/direct_pay/' + this.activeChipsId })
        },
        // 获取评论状态
        getCommentstatus(status) {
            this.callComment = status
        }
    }
}
</script>

<style lang="less">
[v-cloak] {
    display: none;
}
.chips-details-style {
    // width: 100%;
    .details-message {
        height: 4.8rem;
        position: relative;
        > img {
            width: 100%;
            height: 100%;
            background-color: #666;
        }
        > p {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 0.1rem 0.26rem;
            line-height: 0.4rem;
            color: #fff;
            font-size: 0.28rem;
        }
    }
    .user-message {
        padding: 0 0.26rem;
        .user-style {
            padding: 0.3rem 0;
            border-bottom: 1px solid #ddd;
            > img {
                border-radius: 50%;
                height: 0.8rem;
                height: 0.8rem;
                background-color: #666;
                float: left;
            }
            > span {
                float: left;
                line-height: 0.8rem;
                color: #333;
                font-size: 0.28rem;
                margin-left: 0.2rem;
            }
        }
        .explain-style {
            padding-bottom: 0.4rem;
            border-bottom: 1px solid #ddd;
            > span {
                display: block;
                padding: 0.3rem 0;
                font-size: 0.28rem;
                color: #999;
            }
            > p {
                color: #333;
                font-size: 0.3rem;
                line-height: 0.45rem;
            }
        }
    }
    .money-message {
        .raise {
            padding: 0.4rem 0.26rem;
            > div {
                &:first-child {
                    > span {
                        &:nth-child(1) {
                            color: #f93a3a;
                            font-size: 0.24rem;
                        }
                        &:nth-child(2) {
                            color: #f93a3a;
                            font-weight: 600;
                            font-size: 0.36rem;
                        }
                        &:nth-child(3) {
                            color: #f93a3a;
                            font-size: 0.3rem;
                            font-weight: 600;
                        }
                    }
                }
                &:last-child {
                    margin-top: 0.2rem;
                    > span {
                        &:first-child {
                            color: #333;
                            font-size: 0.3rem;
                            font-weight: 600;
                        }
                        &:nth-child(2) {
                            color: #00d8c9;
                            font-size: 0.32rem;
                        }
                        &:nth-child(3) {
                            color: #999;
                            font-size: 0.28rem;
                        }
                        &:nth-child(4) {
                            float: right;
                            color: #999;
                            > img {
                                width: 0.36rem;
                                margin-right: 0.2rem;
                            }
                        }
                    }
                }
            }
        }
        .active-message {
            background-color: #f6f6f6;
            padding: 0.2rem 0 0;
            > ul {
                background-color: #fff;
                padding: 0 0 0 0.26rem;
                > li {
                    padding: 0.2rem 0;
                    border-bottom: 1px solid #e5e5e5;
                    .first-image {
                        width: 0.4rem;
                    }
                    > img {
                        display: inline-block;
                        width: 0.3rem;
                        vertical-align: middle;
                    }
                    > p {
                        display: inline-block;
                        vertical-align: middle;
                        color: #333;
                        width: 90%;
                        font-size: 0.28rem;
                        margin-left: 0.2rem;
                    }
                }
            }
        }
    }
    .image-text {
        width: 100%;
        height: 6.4rem;
        background-color: #f9f9f9;
        padding: 0.2rem 0 0;
        overflow: hidden;
        .image-bgc {
            padding: 0 0.26rem;
            background-color: #fff;
            position: relative;
            height: 100%;
            > div {
                padding: 0.4rem 0;
            }
            > h4 {
                > span {
                    margin-top: 0.2rem;
                    float: left;
                    &:first-child {
                        display: inline-block;
                        width: 0.04rem;
                        height: 0.4rem;
                        background-color: #00d8c9;
                    }
                    &:last-child {
                        margin-left: 0.1rem;
                        font-weight: 600;
                        color: #333;
                        line-height: 0.4rem;
                    }
                }
            }
            .examine-all {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba(255, 255, 255, 0.6);
                height: 1.2rem;
                > span {
                    display: block;
                    text-align: center;
                }
                > img {
                    display: block;
                    margin: 0.1rem auto;
                    height: 0.2rem;
                }
            }
        }
    }
    .apply-number {
        background-color: #f6f6f6;
        padding: 0 0 0.2rem;
        > h5 {
            background-color: #fff;
            padding: 0.26rem;
            font-weight: 60;
            color: #333;
            font-size: 0.36rem;
            font-weight: 500;
        }
        > ul {
            background-color: #fff;
            width: 100%;
            overflow: auto;
            display: flex;
            > li {
                width: 1.8rem;
                flex: 1;
                > a {
                    display: block;
                    margin:  0 auto;
                    width: 1.8rem;
                    height: 100%;
                    padding: 0 0.4rem 0.3rem;
                    flex: 1;
                    > img {
                        display: block;
                        margin: 0 auto;
                        width: 1rem;
                        height: 1rem;
                        border-radius: 50%;
                    }
                    > p {
                        max-width: 1rem;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        margin-top: 0.2rem;
                        text-align: center;
                    }
                }
            }
        }
    }
    .chips-fn {
        border-top: 1px solid #eee;
        height: 1rem;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        .fn {
            height: 100%;
            width: 50%;
            float: left;
            > div {
                height: 100%;
                width: 50%;
                float: left;
                margin-top: 0.2rem;
                > span {
                    width: 0.45rem;
                    height: 0.4rem;
                    display: block;
                    margin: 0 auto;
                }
                > img {
                    width: 0.45rem;
                    height: 0.4rem;
                    display: block;
                    margin: 0 auto;
                }
                > div {
                    font-size: 0.22rem;
                    color: #666;
                    text-align: center;
                }
            }
        }
        .sustain-btn {
            float: right;
            width: 50%;
            height: 100%;
            > a {
                display: block;
                width: 100%;
                height: 100%;
                > button {
                    font-size: 0.36rem;
                    width: 100%;
                    height: 100%;
                    background-color: #00d8c9;
                    text-align: center;
                    color: #fff;
                    border-radius: 0;
                }
                .successHint {
                    background-color: #999;
                }
            }
        }
    }
    .pay-chips {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
        border-top: 1px solid #eee;
        .bgi {
            width: 100%;
            height: 100%;
        }
        .content {
            width: 5.8rem;
            height: 5.6rem;
            background-color: #fff;
            border-radius: 0.1rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 0.4rem 0.3rem;
            > button {
                width: 100%;
                height: 0.8rem;
                text-align: center;
                border-radius: 0.8rem;
                margin: 0.3rem 0;
                font-size: 0.32rem;
                &:nth-child(1) {
                    background-color: #00d8c9;
                    color: #fff;
                    border: none;
                }
                &:nth-child(2) {
                    color: #00d8c9;
                    background-color: #fff;
                    border: 1px solid #e5e5e5;
                }
            }
            > p {
                line-height: 0.45rem;
                color: #999;
                margin-top: 0.2rem;
            }
        }
    }
}
</style>

